<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 style="text-align: center; margin-bottom: 30px;">系统注册</h2>

      <el-form :model="registerForm" @submit.prevent="handleLogin">
        <el-form-item>
          <el-input
              v-model="registerForm.yhm"
              placeholder="用户名"
              prefix-icon="User"
              size="large"
          />
        </el-form-item>

        <el-form-item>
          <el-input
              v-model="registerForm.pwd"
              placeholder="请输入密码"
              prefix-icon="Lock"
              type="password"
              size="large"
          />
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="registerForm.wpwd"
              placeholder="确认密码"
              prefix-icon="Lock"
              type="password"
              show-password
              size="large"
          />
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="registerForm.phone"
              placeholder="请输入手机号"
              type="text"
              size="large"
          />
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-button
              type="primary"
              native-type="submit"
              style="width: 100%; height: 50px; font-size: 16px;"
          >
            注册
          </el-button>
          <span @click="router.push('/yycsh/forget')" class="forget-password">忘记密码</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";
import {useRouter} from 'vue-router'
const router = useRouter()

const registerForm = ref({
  yhm: '',
  pwd: '',
  wpwd: '',
  phone: ''
})
//检查用户名
const queryYhm=async ()=>{
  const {data} = await axios.get(`/api/user/yhm/${registerForm.value.yhm}`);
  return data;
}
//检查手机号
const queryPhone=async ()=>{
  const {data} = await axios.get(`/api/user/phone/${registerForm.value.phone}`);
  return data;
}
//登录
const handleLogin = async () => {
  if (!registerForm.value.yhm || !registerForm.value.pwd|| !registerForm.value.wpwd) {
    ElMessage.error('请输入用户名和密码')
    return
  }
  if (registerForm.value.pwd.length < 6) {
    ElMessage.error('密码长度不能少于6位');
    return;
  }
  if (registerForm.value.pwd !== registerForm.value.wpwd){
    ElMessage.error('密码不一致')
    return
  }
  if (registerForm.value.phone.length !== 11) {
    ElMessage.error('手机号长度必须为11位')
    return
  }
  const yhm = await queryYhm();
  if (yhm != null && yhm !== ''){
    ElMessage.error('用户名已存在，不得重新注册')
  }
  const phone = await queryPhone();
  if (phone != null && phone !== ''){
    ElMessage.error('手机号已存在，不得重新注册')
    return
  }
  const {data} = await axios.post("/api/user", registerForm.value);
  if(data!=null && data!==''){
    ElMessage.success('注册成功');
    await router.push('/yycsh/')
  }
  else{
    ElMessage.error('用户名或密码错误');
  }
}
</script>
<style scoped>
.login-container {
  display: flex;
  position: fixed;
  right: 20px;
  align-items: center;
  min-height: 100vh;
  width: 500px;
}

.login-card {
  width: 400px;
  min-height: 350px;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-input {
  height: 50px;
  font-size: 16px;
}
.forget-password{
  cursor: pointer; /* 鼠标悬停时变为手形指针 */
  color: blue;
}
</style>